<template>
	<view class="order-main">
		<pinapp-empty-page v-if="empty" class="mb200"></pinapp-empty-page>
		<uni-list v-else class="list-box" :border="false">
			<!-- 列表渲染 -->
			<uni-list-item class="list-item" v-for="(item,index) in list" :key="index" :border="false">
				<!-- 通过body插槽定义布局、 -->
				<template v-slot:body>
					<view class="main">
						<view class="feature">
							<view class="title">
								<uni-icons custom-prefix="uciconfont" class="icon-class" color="#e09900" size="20"
									type="icon-vip"></uni-icons> {{item.productName}} 
								<text style="color: red;margin-left: 10rpx;">￥{{item.fee}}</text>
							</view>
						</view>
						<view class="feature">
							<text>订单编号：{{item.number}}</text>
						</view>
						<view class="feature">
							<text>下单时间：{{item.createTime}}</text>
						</view>
					</view>
				</template>
			</uni-list-item>
			<!-- 加载状态：more上拉加载更多，loading加载中，no-more没有更多数据了，加载错误 -->
			<uni-load-more :status="loadingType"></uni-load-more>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					// number: '100'
				},
				loadingType: 'more',
				list: [],
				empty: false
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData() {
				this.loadingType = 'loading'
				this.$get(this.$api.ucenter.order.list, this.queryParams).then(res => {
					this.list = this.list.concat(res.rows)
					this.empty = Boolean(res.total === 0)
					// 是否有更多数据
					this.queryParams.maxPage = res.pages
					this.loadingType =res.hasNextPage?'more':'nomore'
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			}
		},
		onPullDownRefresh() {
			this.init()
			this.list = []
			this.loadData()
		},
		onReachBottom() {
			if (this.queryParams.pageNum < this.queryParams.maxPage) {
				this.queryParams.pageNum++
				this.loadData();
			} else { // 已经没有更多
				this.loadingType = 'no-more'
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	.list-box{
		.list-item{
			.feature {
				flex-direction: row;
				text {
					font-size: 14px;
					color: #868383;
					padding: 4rpx 0;
				}
				.title {
					flex-direction: row;
					align-items: center;
					font-size: 16px;
					color: #e09900;
					font-weight: bold;
					padding-bottom: 8rpx;
					border-bottom: 1px #e09900 solid;
				}
			}
		}
	}
	.main {
		justify-content: space-between;
		flex: 1;
		margin-left: 20rpx;
	}
	
	.info {
		flex-direction: row;
	}
	.mb200{
		margin-bottom: 200rpx;
	}
</style>
<style lang="scss">
	.order-main{
		background-color: #fff;
		padding: 0 10px;
		
		.uni-list-item__container {
			background-image: linear-gradient(to right, #eff8ff, #ffffff, #eff8ff);
			border-top-left-radius: 50px;
			border-bottom-left-radius: 50px;
			margin-bottom: 10px;
		}
	}
</style>